<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>数据导入</title>
    <!--<link rel="stylesheet" th:href="@{/upload.css}">-->
    <style>
        *{
            margin:0;
            padding: 0;
        }
        input,button,select{
            outline: none;
        }
        .uploadTitle {
            margin:0;
            padding: 20px 0px 20px 20px;
            background: #0a6aa1;
            color: white;
            font-size: 20px;
        }
        .uploadForm{
            box-sizing: border-box;
            margin: 20px 20px 20px 22px;
            width: 97%;
            height: 70px;
            line-height: 70px;
            background: #f2f2f2;
            padding-left: 30px;
        }
        .title{
            display: inline-block;
            font-size: 16px;
            margin-right: 30px;
        }
        .control-label{
            display: inline-block;
            margin-right: 10px;
            width: 70px;
        }
        .form-control{
            padding: 3px 8px;
            width: 210px;
        }
        .fileInput{
            box-sizing: border-box;
            width: 200px;
            background: white;
            padding-left: 4px;
        }
        .describe{
            /*border: 0;*/
            border: 1px solid #b0b0b0;
            height: 16px;
        }
        .select-control{
            width: 228px;
        }
        .submitBtn{
            width: 80px;
            height: 24px;
            background: #e59906;
            border: 0;
            color:white;
        }
        .uploadBtn,.closeBtn{
            width: 80px;
            height: 24px;
            background: #2d82e5;
            border: 0;
            color:white;
        }
        .tableWrap{
            border-collapse: collapse;
            border: 0;
            width: 97%;
            margin: 0 0 0 22px;
        }
        .tableWrap th{
            height: 30px;
            background: #f2f2f2;
            font-size: 14px;
            font-weight: 600;
        }
        .tableWrap td{
            height: 45px;
            text-align: center;
        }
        .downloadLink{
            margin-left: 10px;
            font-size: 14px;
            color: #0d8ddb;
            cursor: pointer;
        }
        .uploadFormLay{
            width: 400px;
            height: 190px;
            background: white;
            position: absolute;
            top:50%;
            left:50%;
            transform: translate(-50%,-50%);
            padding: 20px;
        }
        .mask{
            position: absolute;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.4);
            top:0;
            left:0;
            display: none;
        }
        .selectItem{
            height: 35px;
        }
        .selectBtn{
            margin-top: 50px;
            box-sizing: border-box;
            padding-left: 100px;
        }
        .submitBtn{
            margin-right: 20px;
        }
        .able{
            color: #0099ff;
            cursor: pointer;
        }
        .unable{

        }
        .layui-layer-content .tableWrap{
            margin-left: 6px;
        }
        .pagation{
            position: absolute;
            top:90%;
            right: 70px;
        }
        .pagation td{
            width: 80px;
            height: 25px;
        }
        .point{
            cursor: pointer;
        }
        .point:hover{
            color: #0e9aef;
        }
    </style>
</head>
<body>
<h1 class="uploadTitle" th:inlines="text">数据导入</h1>
<div class="uploadForm">
    <div class="title">
        <input class="form-control describe" id="searchInput"/>
    </div>
    <div class="title"><input class="submitBtn" id="searchBtn" type="button" value="搜&nbsp;索"/></div>
    <div class="title"><input class="uploadBtn" id="uploadBtn" type="button" value="上&nbsp;传"/></div>
</div>
<div class="mask" name="mask">
    <form class="uploadFormLay" th:action="@{/file/fileUpload}" method="post" enctype="multipart/form-data">
        <!--<input type="text" name="typeId" value="1" />-->
        <div class="selectItem">
            <label for="uploadForm" class="control-label">部门:</label>
            <select class="form-control select-control" name="deptId">
                <option>请选择部门</option>
                <option  th:each="depts:${depts}" th:value="${depts.id}" th:text="${depts.name }"></option>
            </select>
            <a class="downloadLink" name="downloadLink">下载模板</a>
        </div>

        <div class="selectItem"><span class="control-label">选择文件: </span><input class="fileInput" type="file" name="file"/></div>
        <!--<p>选择文件2: <input type="file" name="fileName"/></p>
        <p>选择文件3: <input type="file" name="fileName"/></p>-->
        <div class="selectItem">
            <label for="uploadForm" class="control-label" placeholder="">文件描述:</label>
            <input class="form-control describe" name="desc"/>
        </div>
        <div class="selectItem selectBtn">
            <input name="submitBtn" class="submitBtn" type="button" value="提&nbsp;交"/>
            <input name="closeBtn" class="closeBtn" type="button" value="关&nbsp;闭"/>
        </div>

    </form>
</div>

<div th:fragment="table_refresh" name="table_refresh">
    <table class="tableWrap" border="1">
        <tr>
            <th>序号</th>
            <th>文件名</th>
            <th>文件大小</th>
            <th>部门</th>
            <th>描述</th>
            <th>导入状态</th>
            <th>导入备注</th>
            <th>上传时间</th>
        </tr>
        <tr th:each="file,infoStat : ${rows}">
            <td th:text="${infoStat.count}"></td>
            <td th:id="${file.id}" th:class="${file.importStatus==3||file.importStatus==4}?'able':'unable'" th:text="${file.name}"></td>
            <td th:text="${file.fileSize}+'k'"></td>
            <td th:text="${file.deptName}"></td>
            <td th:text="${file.fileDesc}"></td>
            <td>
                <div th:switch="${file.importStatus}">
                    <p th:case=1>正在导入</p>
                    <p th:case=2>数据格式不对</p>
                    <p th:case=3>已导入</p>
                    <p th:case=4>导入失败</p>
                    <p th:case="*"></p>
                </div>
            </td>
            <td th:text="${file.importDesc}"></td>
            <td th:text="${#dates.format(file.createtime,'yyyy-MM-dd HH:mm:ss')}"></td>
        </tr>
        <tr class="pagation">
            <td><a class="point" th:with="component =${'首页'}" th:text="${component}" th:onclick="initTable(0,1)">首页</a></td>
            <td th:switch="${pageNum}">
                <p th:case="*"><a class="point" th:onclick="initTable(0,[[${pageNum}]]-1)">上一页</a></p>
            </td>
            <td th:switch="${pageNum}">

                <p th:case="*"><a class="point" th:onclick="initTable(0,[[${pageNum}]]+1)">下一页</a></p>
            </td>
            <td><a class="point" th:onclick="initTable(0,[[${pages}]])">尾页</a></td>
            <td><a th:text="'第'+${pageNum}+'页'"></a></td>
            <td><a th:text="'共'+${pages}+'页'"></a></td>
        </tr>
    </table>

</div>
<div th:fragment="tablec_refresh" style="display: none" name="table_refresh">
    <table class="tableWrap" border="1">
        <tr>
            <th>序号</th>
            <th>文件名</th>
            <th>文件大小</th>
            <th>部门</th>
            <th>描述</th>

        </tr>
        <tr th:each="file,infoStat : ${rows}">
            <td th:text="${infoStat.count}"></td>
            <td th:id="${file.id}" th:class="${file.importStatus==3||file.importStatus==4}?'able':'unable'" th:text="${file.name}"></td>
            <td th:text="${file.fileSize}+'k'"></td>
            <td th:text="${file.deptName}"></td>
            <td th:text="${file.fileDesc}"></td>
        </tr>
        <tr class="pagation">
            <td><a class="point" th:with="component =${'首页'}" th:text="${component}" th:onclick="childTable(1)">首页</a></td>
            <td th:switch="${pageNum}">
                <p th:case="*"><a class="point" th:onclick="childTable([[${pageNum}]]-1)">上一页</a></p>
            </td>
            <td th:switch="${pageNum}">

                <p th:case="*"><a class="point" th:onclick="childTable([[${pageNum}]]+1)">下一页</a></p>
            </td>
            <td><a class="point" th:onclick="childTable([[${pages}]])">尾页</a></td>
            <td><a th:text="'第'+${pageNum}+'页'"></a></td>
            <td><a th:text="'共'+${pages}+'页'"></a></td>
        </tr>
    </table>
</div>
    <script th:src="@{/jquery.min.js}"></script>
    <script th:src="@{/layer/layer.min.js}"></script>
    <script th:inline="javascript">
        //页面初次加载
        var pidStart = 0;
        var pageNumStart = 1;
        initTable(pidStart,pageNumStart);
        function initTable(pid,pageNum,search) {
            if(!search){
                $('[name="table_refresh"]').load("/file/getFiles?&pageSize=10&pid="+pid+"&pageNum="+pageNum);
            }else{
                //alert(search);
                $('[name="table_refresh"]').load("/file/getFiles?&pageSize=10&pid="+pid+"&pageNum="+pageNum+"&search="+search);
            }

        }
        //回车事件绑定
        $('#searchInput').bind('keypress', function(event) {
            if (event.keyCode == "13") {
                var searchName = $('#searchInput').val();
                initTable(pidStart,pageNumStart,searchName);
            }
        });
        $('#searchBtn').click(function () {
            var searchName = $('#searchInput').val();
            initTable(pidStart,pageNumStart,searchName);
        });
        $('#uploadBtn').click(function () {
            $('[name="mask"]').show();
        });
        $('[name="closeBtn"]').click(function () {
            $('[name="mask"]').hide();
            //清空操作
            $('[name="deptId"]').val('请选择部门');
            $('[name="file"]').val('');
            $('[name="desc"]').val('');
        });
        $('[name="deptId"]').change(function (e) {
            var deptId = $(e.target).val();
            if("请选择部门" == deptId){
                $('[name="downloadLink"]').removeAttr('href');
            }else {
                var url = '/file/download?deptId=' + deptId;
                $('[name="downloadLink"]').prop('href', url);
            }
        });

        $('[name="submitBtn"]').click(function () {
            var formData = new FormData();
            var deptId = $('[name="deptId"]').val();
            var file = $('[name="file"]').get(0).files[0];
            var desc = $('[name="desc"]').val();
             console.log(deptId,desc,file);
            if(deptId&&file){
                formData.append("deptId",deptId);
                formData.append("file",file);
                formData.append("desc",desc);
                console.log(formData);
                unloadFormInit(formData);
            }else{
                alert('请填写必要信息');
            }
        });
        function unloadFormInit(dataP) {
            var url = [[@{/file/fileUpload}]];
            console.log(url);
            $.ajax({
                type: 'post',
                url: url,
                data:dataP,
                contentType: false, //不设置内容类型
                processData: false, //不处理数据
                success: function (data) {
                    //console.log(data);
                    if(data.state==1){
                        $('[name="mask"]').hide();
                        initTable(pidStart,pageNumStart);
                        //清空操作
                        $('[name="deptId"]').val('请选择部门');
                        $('[name="file"]').val('');
                        $('[name="desc"]').val('');
                        layer.msg(data.data,{
                            icon:1
                        })
                    }else {
                        layer.msg(data.data,{
                            icon:2,
                            btn:['确认'],
                            time:10000
                        })
                    }

                }
            })
        }
        var pid;
        var pName;
        $('.able').unbind('click');
        $(document).on('click', '.able' ,function (e) {
            pid = $(e.target).prop('id');
            pName = $(e.target).text();
            console.log(pName);
            childTable();
        });

        //子表格
        function childTable(pageNumber) {
            var pageN = pageNumber?pageNumber:1;
            console.log(pageNumber);
            $.ajax({
                type:'post',
                url: '/file/getFilesc',
                data: {
                    pid:pid,
                    pageSize:5,
                    pageNum:pageN
                },
                success: function (data) {
                    //console.log(data);
                    var fileHtml = data;

                    //console.log(pageNumber);
                    if(pageNumber==undefined){
                        layer.open({
                            title: '文件详情 ['+pName+']',
                            area: ['600px','500px'],
                            content: fileHtml,
                            btn: ['关闭'],
                            success: function () {
                                $('.layui-layer-content [name="table_refresh"]').show();
                            }
                        });
                    }else{
                        $('.layui-layer-content').html(fileHtml);
                        $('.layui-layer-content [name="table_refresh"]').show();
                    }

                }
            });
        }
    </script>
</body>
</html>